<template>
  <div>
    <el-card shadow='false' class="box-card">
      <div slot="header" class="clearfix">
        <el-button @click="addItems" type="primary">新增</el-button>
      </div>
      <div class="text item">
        <el-table :data="tableData" border >
          <el-table-column align="center" label="序号" type="index" width="50">
          </el-table-column>
          <el-table-column
            align="center"
            prop="date"
            label="商品图片"
            width="180"
          >
            <template slot-scope="scope">
              <img
                style="width: 100px; height: 100px"
                :src="scope.row.pic"
                alt=""
              />
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="活动时间"
            width="240"
          >
            <template slot-scope="scope">
              <p>开始时间: {{ scope.row.promotionStartTime }}</p>
              <p>结束时间: {{ scope.row.promotionEndTime }}</p>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="是否过期"
            width="80"
          >
            <template slot-scope="scope">
              <el-tag :type="scope.row.publishStatus ? '' : 'danger'">{{
                scope.row.publishStatus ? "否" : "是"
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="name"
            label="商品名称"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="brandName"
            label="品牌名牌"
            width="150"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="price"
            label="商品价格"
            width="90"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="productCategoryName"
            label="商品类别"
            width="100"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            label="创建时间"
            width="180"
          >
          </el-table-column>
          <el-table-column align="center" prop="address"   width="100" label="操作">
            <template slot-scope="scope">
              <el-button @click="del(scope.row)" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <el-dialog
      width="80%"
      top="40px"
      title="热销详情"
      :visible.sync="dialogTableVisible"
    >
      <el-card
        shadow="naver"
        style="margin-bottom: 20px; margin-top: -20px"
        class="box-card3"
      >
        <div slot="header" class="clearfix">
          <span>条件查询</span>
        </div>
        <div class="text item search">
          <el-col :span="4"
            ><el-input
              v-model="goodsName"
              placeholder="商品名称/模糊查询"
            ></el-input
          ></el-col>
          <el-col :span="3"
            ><el-input v-model="goodsNumber" placeholder="商品货号"></el-input
          ></el-col>
          <el-col :span="3">
            <el-select v-model="brandId" placeholder="请选择品牌">
              <el-option
                label="东易日盛家居装饰"
                value="1329320162080423937"
              ></el-option>
              <el-option
                label="有家良品"
                value="1328952247757930497"
              ></el-option>
              <el-option
                label="简野(JIANYE)"
                value="1328880034681815042"
              ></el-option>
              <el-option
                label="家乐名品(JLVP)"
                value="1328964991345328130"
              ></el-option>
              <el-option
                label="雷蛇照明"
                value="1328990701308968962"
              ></el-option>
              <el-option
                label="东易日盛"
                value="1328988221644832769"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="shangjiaStatus" placeholder="请选择上架状态">
              <el-option label="上架" :value="0"></el-option>
              <el-option label="未上架" :value="1"></el-option>
            </el-select>
          </el-col>
          <el-col :span="3">
            <el-select v-model="shenheStatus" placeholder="请选择审核状态">
              <el-option label="审核" :value="0"></el-option>
              <el-option label="未审核" :value="1"></el-option>
            </el-select>
          </el-col>
          <el-col style="margin-top: 5px" :span="3">
            <el-button type="primary" size="small" @click="resetting" plain
              >重置</el-button
            >
            <el-button type="primary" size="small" @click="search"
              >搜索</el-button
            >
          </el-col>
        </div>
      </el-card>

      <el-table style="height: 600px; overflow: auto" :data="gridData" border>
        <el-table-column
          align="center"
          label="序号"
          type="index"
          width="100"
        ></el-table-column>
        <el-table-column align="center" property="" label="选择" width="200">
          <template slot-scope="scope">
            <el-radio
              @change="choice(scope.row)"
              :label="scope.row.id"
              v-model="goodsId"
            ></el-radio>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          property=""
          label="商品图片"
          width="200"
        >
          <template slot-scope="scope">
            <img
              style="width: 150px; height: 150px"
              :src="scope.row.pic"
              alt=""
            />
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          property="name"
          label="商品名称"
          width="500"
        >
          <template slot-scope="scope">
            <p>名称: {{ scope.row.name }}</p>
            <p>品牌: {{ scope.row.brandName }}</p>
            <p>{{ scope.row.detailTitle }}</p>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          property=""
          label="商品价格"
          width="200"
        >
          <template slot-scope="scope">
            <p>原价: {{ scope.row.price }}</p>
            <p>现价: {{ scope.row.originalPrice }}</p>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          property="productCategoryName"
          label="商品类别"
        ></el-table-column>
        <el-table-column
          align="center"
          property="weight"
          label="商品重量"
        ></el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          style="margin-top: 10px; margin-bottom: -20px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[3, 6, 9, 12]"
          :page-size="3"
          layout="sizes, prev, pager, next"
          :total="totalnumber"
        >
        </el-pagination>
      </div>
    </el-dialog>

    <el-dialog title="编辑限时活动" :visible.sync="dialogTableVisible1">
      <el-row>
        <el-col :span="6">商品原价: {{ goodsData.price }}</el-col>
        <el-col :span="18">商品名称: {{ goodsData.name }}</el-col>
      </el-row>
      <el-row style="margin-top: 30px">
        <el-col :span="12"
          >促销价格:
          <el-input-number
            v-model="originalPrice"
            @change="priceChange"
            :min="10"
            :max="1000000"
            label="促销价格"
            size="small"
          ></el-input-number
        ></el-col>
        <el-col :span="12"
          >排序:
          <el-input-number
            v-model="orderNum"
            @change="orderChange"
            :min="1"
            :max="1000"
            label="排序"
            size="small"
          ></el-input-number
        ></el-col>
      </el-row>
      <el-row style="margin-top: 30px">
        <el-col :span="3" style="line-height: 40px">开始结束时间</el-col>
        <el-col :span="21">
          <el-date-picker
            v-model="time"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-col>
      </el-row>

      <el-row style="margin-top: 30px">
        <el-col :span="12" style="line-height: 40px">
          <span>活动限购数量</span>
          <el-input
            style="width: 200px; margin-left: 10px"
            v-model="buyCount"
            placeholder="请输入数量"
          ></el-input>
        </el-col>
      </el-row>

      <el-row style="margin-top: 30px">
        <el-col :span="2" style="line-height: 40px">
          <span>商品图片</span>
        </el-col>
        <el-col :span="12">
          <img
            style="width: 150px; height: 150px"
            :src="goodsData.pic"
            alt=""
          />
        </el-col>
      </el-row>
      <el-row style="margin-top: 30px">
        <el-col :span="2">
          <el-button type="primary" @click="addGoods">确认</el-button>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" @click="cancel" plain>取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import marketingApi from "@/api/marketing/index";
export default {
  components: {},

  data() {
    return {
      tableData: [],
      dialogTableVisible: false,
      dialogTableVisible1: false,
      gridData: [],
      goodsName: "",
      goodsNumber: "",
      brandId: "",
      shangjiaStatus: "",
      shenheStatus: "",
      start: 1,
      limit: 3,
      totalnumber: "",
      start1: 1,
      limit1: 5,
      totalnumber1: "",
      brandList: [],
      goodsId: "",
      goodsShow: false,
      goodsData: [],
      originalPrice: "",
      orderNum: "",
      time: "",
      buyCount: "",
    };
  },

  created() {
    this.init();
  },

  mounted() {},

  methods: {
    // 新增
    addItems() {
      this.dialogTableVisible = true;
      this.getProduct();
    },
    // 取消添加
    cancel() {
      this.dialogTableVisible1 = false;
    },
    // 确认添加促销商品
    addGoods() {
      console.log(this.i);
      this.$confirm("是否将此商品设为热销, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        marketingApi
          .addRecommend({
            productId: this.goodsId,
            promotionEndTime: this.time[1],
            // promotionEndTime: "2020-12-22 00:00:00",
            promotionPerLimit: this.buyCount,
            promotionPrice: this.originalPrice,
            promotionStartTime: this.time[0],
            // promotionStartTime: "2020-12-16 00:00:00",
            sort: this.goodsData.sort,
            publishStatus: 1,
          })
          .then((res) => {
            console.log(res);
            if (res.success) {
              this.dialogTableVisible1 = false;
              this.dialogTableVisible = true;
              this.buyCount = 1;
              this.init();
            } else {
              this.$message.error(res.message);
            }
          });
      });
    },
    // 排序的选择
    orderChange() {},
    // 促销的价格的选择
    priceChange() {},
    // 删除某一项
    del(item) {
      console.log(item.productId);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        marketingApi.delRecommend(item.recommendId).then((res) => {
          console.log(res);
          if (res.success) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.init();
          } else {
            this.$message.error(res.message);
          }
        });
      });
    },
    // 选择对应商品
    choice(item) {
      console.log(item);
      this.goodsData = item;
      this.originalPrice = item.price;
      this.orderNum = 1;
      this.dialogTableVisible1 = true;
    },
    // 重置
    resetting() {
      this.brandId = this.goodsName = this.goodsNumber = this.shangjiaStatus = this.shenheStatus =
        "";
      this.start = 1;
      this.limit = 3;
      this.init();
    },
    // 搜索
    search() {
      this.init();
    },
    getProduct() {
      // 获取产品列表
      marketingApi
        .productsByPage(this.start, this.limit, {
          brandId: this.brandId,
          name: this.goodsName,
          productSn: this.goodsNumber,
          publishStatus: this.shangjiaStatus,
          verifyStatus: this.shenheStatus,
        })
        .then((res) => {
          console.log(res);
          this.gridData = res.data.rows;
          this.totalnumber = res.data.total;
        });
    },
    // 获取数据
    init() {
      // 获取促销列表
      marketingApi.findAllRecommends().then((res) => {
        console.log(res);
        this.tableData = res.data.items;
        this.totalnumber1 = res.data.items.length;
      });
      // 获取品牌列表
      marketingApi.findAllBrand().then((res) => {
        console.log(res);
      });
    },
    // 切换每页显示多少个
    handleSizeChange(e) {
      console.log(e);
      this.limit = e;
      this.getProduct();
    },
    // 切换页码
    handleCurrentChange(e) {
      console.log(e);
      this.start = e;
      this.getProduct();
    },
  },

  computed: {},

  watch: {},
};
</script>

<style scoped lang='scss'>
.box-card {
  width: 97%;
  margin: 15px auto;
}
.box-card1 {
  width: 97%;
  margin: 15px auto;
}
.search {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  margin-top: -5px;
  height: 35px;
}
</style>